<script setup lang='ts'>
import { RouterView, useRoute } from 'vue-router';
//引入logo组件
import logo from "@/components/logo/logo.vue"

//引入顶部组件
import Tabber from "@/components/top/index.vue"
//引入菜单组件、
import myMenu from "@/components/menu/test.vue"
//引入内容组件
import Main from "@/views/homePage/index.vue"
//引入控制折叠的小仓库
import { sliderFoldStore } from "@/stores/modules/sliderFold"
let sliderStore = sliderFoldStore();

//获取路由
const $route = useRoute();
//获取相关的小仓库
import { store } from "@/stores/modules/user"
let userStore = store();


</script>

<template>
    <div class="layout_container">
        <!------左侧菜单------>
        <div class="layout_slider" :class="{ fold: sliderStore.foldStatus ? false : true }">
            <!--logo-->
            <logo />
            <!--展示菜单-->
            <el-menu active-text-color="#ffd04b" background-color="#00152b" :default-active="$route.path"
                text-color="#fff" :collapse="sliderStore.foldStatus ? false : true">
                <myMenu :menuList="userStore.menuRouters" />
            </el-menu>
        </div>
        <!-------顶部导航---------->
        <div class="layout_tabber" :class="{ tabber_fold: sliderStore.foldStatus ? false : true }">
            <Tabber />
        </div>
        <!-----------内容展示区-->
        <div class="layout_main" :class="{ main_fold: sliderStore.foldStatus ? false : true }">
            <Main></Main>
        </div>


    </div>
</template>

<style lang="less" scoped>
.layout_container {

    width: 100%;
    height: 100vh;
    background-color: #f0f2f5;


    .fold {
        width: var(--menu-min-width) !important;

    }

    .tabber_fold {
        width: calc(100% - var(--menu-min-width)) !important;
        left: var(--menu-min-width) !important;
        ;
    }

    .main_fold {
        width: calc(100% - var(--menu-min-width)) !important;
        left: var(--menu-min-width) !important;
        ;
    }

    .layout_slider {
        width: var(--left-tabber-width);
        height: 100%;
        background-color: #00152b;
        text-align: center;
        transition: all 0.3s;
        overflow: hidden;


    }

    .layout_tabber {
        position: absolute;
        top: 0;
        left: var(--left-tabber-width);
        width: calc(100% - var(--left-tabber-width));
        height: var(--top-tabber-height);
        transition: all 0.3s;

    }

    .layout_main {
        position: absolute;
        top: var(--top-tabber-height);
        left: var(--left-tabber-width);
        width: calc(96% - var(--left-tabber-width));
        overflow: auto;
        margin-left: 2%;
        margin-top: 3%;
        transition: all 0.3s;
        height: calc(90% - var(--top-tabber-height));
        scrollbar-width:none;

    }

  
}
</style>